<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
  <script>
    
    const app = Vue.createApp({    
      template:`
        <input v-model="name"/><div>{{name}}</div>
        <input v-model="age"/><div>{{age}}</div>`,
      setup(){
        const {ref,watch,toRefs,reactive,watchEffect}=Vue;
        // const name=ref('dell');
        const nameObj=reactive({name:'lee',age:14});
        //具备一定的惰性
        const stop1=watch([()=>nameObj.name,()=>nameObj.age],([curName,curAge],[prevName,prevAge])=>{
          console.log(curName,prevName,curAge,prevAge);
          setTimeout(()=>{
            stop1();
          },5000)
        },{immediate:true})
        //立即执行，没有惰性
        //不需要传递你要监听的内容，自动回感知代码依赖。不需要传递参数，只要传递一个回调函数
        //不能获取之前数据的值
        const stop=watchEffect(()=>{
          console.log(nameObj.name);
          setTimeout(()=>{
            stop();
          },5000)
        })
        
        const {name,age}=toRefs(nameObj)
        return {name,age}
      }
    });


   
    const vm = app.mount('#root');
  </script>
</body>

</html>